<template>
	<view class="pages">
		<view class="title-nav" :style="current ? '' : 'justify-content: center;'">
			<uni-icons v-if="current" @click="current = 0" type="left" size="24" color="white"></uni-icons>
			<text :style="current ? 'margin-right:24px' : ''">{{
        !current ? "登录" : "注册"
      }}</text>
			<text></text>
		</view>
		<div class="login-wrapper">
			<div class="shading">
				<image src="/static/logo.jpg" />
			</div>
			<div class="whiteBg" v-if="formItem === 1">
				<div class="list" v-if="current === 0">
					<form @submit.prevent="submit">
						<div class="item">
							<div class="acea-row row-middle">
								<uni-icons type="person" size="26" color="#aaa"></uni-icons>
								<input :maxlength="11" type="text" class="texts" placeholder="输入账号" v-model="username"
									required />
							</div>
						</div>
						<div class="item">
							<div class="acea-row row-middle">
								<uni-icons type="info" size="26" color="#aaa"></uni-icons>
								<input type="password" class="texts" placeholder="填写登录密码" v-model="password" required />
							</div>
						</div>
					</form>
				</div>
				<div class="list" v-if="current !== 0">
					<div class="item">
						<div class="acea-row row-middle">
							<image src="/static/images/phone_1.png" style="width: 24rpx; height: 34rpx"></image>
							<input type="text" class="texts" placeholder="输入手机号码" v-model="phone" :maxlength="11" />
						</div>
					</div>
					<div class="item">
						<div class="acea-row row-middle">
							<image src="/static/images/code_2.png" style="width: 28rpx; height: 32rpx"></image>
							<input type="text" placeholder="填写验证码" class="codeIput" v-model="smscode" />
							<button class="code" :disabled="disabled" :class="disabled === true ? 'on' : ''"
								@click="code">
								{{ text }}
							</button>
						</div>
					</div>
					<div class="item">
						<div class="acea-row row-middle">
							<image src="/static/images/phone_1.png" style="width: 24rpx; height: 34rpx"></image>
							<input type="password" class="texts" placeholder="设置6-16位密码" v-model="password" />
						</div>
					</div>
				</div>
				<div class="logon" @click="registerHand" v-if="current == 1">注册</div>
				<div class="logon" @click="submit" v-if="current === 0">登录</div>
				<div class="logon" @click="registerHand" v-if="current === 2">确定</div>
				<div class="tips">
					<div class="currentNone" v-if="current == 0 && Entrance == 'user'">
						<text @click="regHand">注册</text>
						<text @click="current = 2">忘记密码></text>
						<!-- 快速登录 -->
					</div>
				</div>
			</div>
			<!-- <wu-app-update></wu-app-update> -->
		</div>
	</view>
</template>

<script>
	import sendVerifyCode from "@/mixins/SendVerifyCode";
	import {
		loginH5,
		registerVerify,
		register,
		passwordChange,
		hloginH5,
	} from "@/api/user";
	import attrs, {
		required,
		alpha_num,
		chs_phone
	} from "@/utils/validate";

	import {
		appAuth,
		appleLogin
	} from "@/api/public";

	const BACK_URL = "login_back_url";

	export default {
		name: "Login",
		mixins: [sendVerifyCode],
		data: function() {
			return {
				navList: ["快速登录", "账号登录"],
				current: 0,
				phone: "",
				username: "",
				password: "",
				smscode: "",
				formItem: 1,
				type: "login",
				platform: "",
				Entrance: "",
			};
		},
		watch: {
			formItem: function(nval, oVal) {
				if (nval == 1) {
					this.type = "login";
				} else {
					this.type = "register";
				}
			},
		},

		onLoad(option) {
			this.Entrance = option.type
			let self = this;
			uni.getSystemInfo({
				success: function(res) {
					if (
						res.platform.toLowerCase() == "ios" &&
						res.system.split(" ")[1] >= 13
					) {
						self.appleShow = true;
					}
				},
			});
		},
		methods: {
			async registerHand() {
				let that = this;
				if (!that.phone)
					return that.$util.Tips({
						title: "请填写手机号码",
					});
				if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.phone))
					return that.$util.Tips({
						title: "请输入正确的手机号码",
					});
				if (!that.smscode)
					return that.$util.Tips({
						title: "请填写验证码",
					});
				if (!/^[\w\d]+$/i.test(that.smscode))
					return that.$util.Tips({
						title: "请输入正确的验证码",
					});
				if (!that.password)
					return that.$util.Tips({
						title: "请填写密码",
					});
				if (!/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/i.test(that.password))
					return that.$util.Tips({
						title: "您输入的密码过于简单",
					});
				if (that.current == 2) {
					// 修改密码
					passwordChange({
							phone: that.phone,
							smscode: that.smscode,
							password: that.password,
						})
						.then((res) => {
							that.$util.Tips({
								title: "修改成功",
							});
							that.reset();
						})
						.catch((res) => {
							that.$util.Tips({
								title: res,
							});
						});
					1;
				} else {
					// 注册
					register({
							phone: that.phone,
							smscode: that.smscode,
							password: that.password,
						})
						.then((res) => {
							that.$util.Tips({
								title: "注册成功",
							});
							that.reset();
						})
						.catch((res) => {
							that.$util.Tips({
								title: res,
							});
						});
					1;
				}
			},
			code() {
				let that = this;
				if (!that.phone)
					return that.$util.Tips({
						title: "请填写手机号码",
					});
				if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.phone))
					return that.$util.Tips({
						title: "请输入正确的手机号码",
					});
				if (that.formItem == 2) that.type = "register";
				registerVerify({
						mobile: that.phone,
						smsmode: that.current
					})
					.then((res) => {
						that.$util.Tips({
							title: "发送成功",
						});
						that.sendCode();
					})
					.catch((err) => {
						return that.$util.Tips({
							title: err,
						});
					});
			},

			async submit() {
				let that = this;
				if (that.Entrance != 'user') {
					if (!that.username)
						return that.$util.Tips({
							title: "请填写账号",
						});
					if (!/^[\w\d]{5,16}$/i.test(that.username))
						return that.$util.Tips({
							title: "请输入正确的账号",
						});
				} else {
					if (!that.username)
						return that.$util.Tips({
							title: "请填写手机号码",
						});
					if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.username))
						return that.$util.Tips({
							title: "请输入正确的手机号码",
						});
				}
				if (!that.password)
					return that.$util.Tips({
						title: "请填写密码",
					});
				uni.showLoading({
					title: "正在登陆",
				});
				if (that.Entrance == 'user') {
					loginH5({
							username: that.username,
							password: that.password,
						})
						.then(({
							result
						}) => {
							that.navgetToHandler(result);
							uni.hideLoading();
						})
						.catch((e) => {
							that.$util.Tips({
								title: e,
							});
						});
				} else {
					hloginH5({
							username: that.username,
							password: that.password,
						})
						.then(({
							result
						}) => {
							that.navgetToHandler(result);
							uni.hideLoading();
						})
						.catch((e) => {
							that.$util.Tips({
								title: e,
							});
						});
				}
			},
			navgetToHandler(data) {
				uni.reLaunch({
					url: "/pages/index/index",
				});
				this.$store.commit("LOGIN", data);
			},
			regHand() {
				this.current = 1;
				this.password = "";
				this.phone = "";
				this.smscode = "";
				this.formItem = 1;
			},
			reset() {
				this.current = 0;
				this.password = "";
				this.phone = "";
				this.smscode = "";
				this.formItem = 1;
			},
		},
	};
</script>
<style lang="scss" scoped>
	@import url("../../../static/css/gstyle.scss");

	.appLogin {
		margin-top: 60rpx;

		.hds {
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 24rpx;
			color: #b4b4b4;

			.line {
				width: 68rpx;
				height: 1rpx;
				background: #cccccc;
			}

			p {
				margin: 0 20rpx;
			}
		}

		.btn-wrapper {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 30rpx;

			.btn {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 68rpx;
				height: 68rpx;
				border-radius: 50%;
			}

			.apple-btn {
				display: flex;
				align-items: center;
				justify-content: center;
				margin-left: 30rpx;
				background: #000;
				border-radius: 34rpx;
				font-size: 40rpx;

				.icon-s-pingguo {
					color: #fff;
					font-size: 40rpx;
				}
			}

			.iconfont {
				font-size: 40rpx;
				color: #fff;
			}

			.wx {
				margin-right: 30rpx;
				background-color: #61c64f;
			}

			.mima {
				background-color: #28b3e9;
			}

			.yanzheng {
				background-color: #f89c23;
			}
		}
	}

	.code img {
		width: 100%;
		height: 100%;
	}

	.acea-row.row-middle {
		input {
			margin-left: 20rpx;
			display: block;
		}
	}

	.pages {
		height: calc(100vh - 44px);
		overflow: hidden;

		.login-wrapper {
			padding: 30rpx;
			width: 100%;
			margin-top: 5vh;

			.shading {
				display: flex;
				align-items: start;
				justify-content: center;
				width: 100%;
				margin-bottom: 100rpx;

				image {
					width: 250rpx;
					height: 250rpx;
					border-radius: 50%;
				}
			}

			.whiteBg {
				.list {
					border-radius: 16rpx;
					overflow: hidden;

					.item {
						border-bottom: 1px solid #f0f0f0;
						background: #fff;

						.row-middle {
							position: relative;
							padding: 16rpx 45rpx;

							.texts {
								flex: 1;
								font-size: 28rpx;
								height: 80rpx;
								line-height: 80rpx;
								display: flex;
								justify-content: center;
								align-items: center;
							}

							input {
								flex: 1;
								font-size: 28rpx;
								height: 80rpx;
								line-height: 80rpx;
								display: flex;
								justify-content: center;
								align-items: center;
							}

							.code {
								position: absolute;
								right: 30rpx;
								top: 50%;
								color: $theme-color-buy;
								font-size: 26rpx;
								transform: translateY(-50%);
							}
						}
					}
				}

				.logon {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 100%;
					height: 86rpx;
					margin-top: 80rpx;
					background-color: $theme-color-buy;
					border-radius: 120rpx;
					color: #ffffff;
					font-size: 30rpx;
				}

				.tips {
					margin: 30rpx;
					text-align: center;
					color: #777;

					.currentNone {
						display: flex;
						justify-content: space-between;
					}
				}
			}
		}
	}
</style>